<template>
  <div>
    <Header :index="$route.path" />
    <div class="picbox">
      <Swiper :imglist="books" :isShow="true" />
      <div class="container">
        <BookItem
          v-for="(item, index) in bookList"
          :key="index"
          :bookInfo="item"
          @addBook="getBookBox"
          @deleteBook="setBookBox"
        />
      </div>
      <div class="myCollect">我的收藏(共{{ total }}本) :</div>
      <div style="text-align: center">
        <table cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th>书名</th>
              <th>描述</th>
            </tr>
          </thead>
          <tr v-for="(item, index) in bookBox" :key="index">
            <td class="picList">
              <img :src="item.image" alt="暂时无法加载图片" />
            </td>
            <td class="description">{{ item.description }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "../components/Header";
import Swiper from "../components/swiper";
import BookItem from "../components/BookItem";
export default {
  data() {
    return {
      books: {},
      bookList: [],
      bookBox: [],
    };
  },
  components: {
    Header,
    Swiper,
    BookItem,
  },
  created() {},
  mounted() {
    this.$http.get("/v1/book/banner").then((res) => {
      this.books = res.data;
    });
    this.$http.get("/v1/book/detail").then((res) => {
      this.bookList = res.data;
    });
  },
  methods: {
    getBookBox(val) {
      this.bookBox.push(val);
      console.log(this.bookBox);
    },
    setBookBox(val) {
      this.bookBox = this.bookBox.filter((item) => {
        return item.id != val.id;
      });
    },
  },
  computed: {
    total: function () {
      return this.bookBox.length;
    },
  },
};
</script>
<style  lang='less' scoped>
.picbox {
  height: 800px;
}
.container {
  text-align: center;
}
table {
  margin-left: 20px;
  display: inline-block;
  height: 500px;
  width: 1300px !important;
}

thead {
  border: 1px solid #e8eaec;
}
th {
  background: #f8f8f9;
  height: 48px;
  width: 650px;
  font-size: 14px;
  color: #515a6e;
  border: 1px solid #e8eaec;
  border-bottom: 2px solid #e8eaec;
}
.myCollect {
  height: 30px;
  margin-bottom: 30px;
  color: #2d8cf0;
  text-align: center;
  font-size: 20px;
}
.picList img {
  width: 200px;
  height: 200px;
}
.picList {
  width: 500px;
  text-align: center;
}
tr td {
  padding: 20px 0;
  margin-bottom: 20px;
  border: 1px solid #e8eaec;
}
</style>